<template>
  <div id="home">
    <!--标题栏组件-->
    <nav-bar>
      <template v-slot:title>图书兄弟</template>
    </nav-bar>
    <!-- 固定导航条 -->
    <tab-control
      @tabClick="Tabclick"
      :titles="['畅销', '新书', '精选']"
      v-show="isTabFixed"
    ></tab-control>
    <!-- 屏幕滚动 -->
    <div class="wrapper">
      <div class="content">
        <!--banner图-->
        <div ref="banref">
          <swiper-view :banners="banners"></swiper-view>
          <!-- 推荐商品 -->
          <tuijian-view :tuijian="tuijian"></tuijian-view>
        </div>
        <!-- tab选项卡 -->
        <tab-control
          @tabClick="Tabclick"
          :titles="['畅销', '新书', '精选']"
        ></tab-control>
        <!-- 商品页面 -->
        <good-list :goods="showGoods"></good-list>
      </div>
    </div>
    <back-top v-show="isShowTop" @bTop="backTop"></back-top>
  </div>
</template>

<script>
//商品页面组件
import GoodList from "components/content/Goods/GoodList.vue";
//底部选项卡
import NavBar from "components/common/NavBar.vue";
//推荐组件
import TuijianView from "./ChildComps/TuijianBView.vue";
// tab选项卡组件
import TabControl from "components/content/tabControl/TabControl.vue";
//导入网络请求数据
import { getHomeAllData, getHomeGoods } from "network/home.js";
//导入BettetScroll插件
import BScroll from "better-scroll";
//轮播组件
import SwiperView from "./ChildComps/SwiperViews.vue";
import { reactive, ref } from "@vue/reactivity";
import { computed, onMounted } from "@vue/runtime-core";
import BackTop from "components/common/backtop/BackTop.vue";

export default {
  components: {
    NavBar,
    TuijianView,
    TabControl,
    GoodList,
    BackTop,
    SwiperView,
  },
  name: "HomeViewe",
  setup() {
    //存储推荐数据
    let tuijian = ref([]);
    let isTabFixed = ref(false);
    //轮播图数据
    let banners = ref([]);
    //商品数据模型
    const goods = reactive({
      sales: { page: 1, list: [] },
      recommend: { page: 1, list: [] },
      new: { page: 1, list: [] },
    });
    const Tabclick = (index) => {
      let types = ["sales", "new", "recommend"];
      currentType.value = types[index];
    };
    var bscroll = reactive({});
    onMounted(() => {
      //请求轮播图的数据
      getHomeAllData().then((res) => {
        banners.value = res.slides;
      });
      //请求推荐数据
      getHomeAllData().then((res) => {
        tuijian.value = res.goods.data;
      });
      //获取热销数据数据
      getHomeGoods().then((res) => {
        goods.sales.list = res.goods.data;
      });
      //获取推荐产品数据
      getHomeGoods("recommend").then((res) => {
        goods.recommend.list = res.goods.data;
      });
      //获取新品数据
      getHomeGoods("new").then((res) => {
        goods.new.list = res.goods.data;
      });
      //创建BatterScroll对象
      bscroll = new BScroll(document.querySelector(".wrapper"), {
        probeType: 3, //0,1,2,3
        click: true, //是否允许鼠标点击
        pullUpLoad: true, // 上拉加载更多
      });

      //触发事件
      bscroll.on("scroll", (position) => {
        isShowTop.value = isTabFixed.value =
          -(position.y) > banref.value.offsetHeight;
      });
      //上拉加载数据，触发pullingUp
      bscroll.on("pullingUp", () => {
        const page = goods[currentType.value].page + 1;
        getHomeGoods(currentType.value, page).then((res) => {
          //刷新list里面的数据
          goods[currentType.value].list.push(...res.goods.data);
          //page+1
          goods[currentType.value].page += 1;
        });
        //完成上拉，等数据请求完成，要将数据展示出来
        bscroll.finishPullUp();

        //重新计算高度
        bscroll.refresh();
      });
    });

    //返回对象的list
    let currentType = ref("sales");
    const showGoods = computed(() => {
      return goods[currentType.value].list;
    });
    //获取banner入的dom
    let banref = ref(null);
    //返回顶部
    let isShowTop = ref(false);
    const backTop = () => {
      bscroll.scrollTo(0, 0, 500);
    };
    return {
      Tabclick,
      tuijian,
      goods,
      showGoods,
      isTabFixed,
      banref,
      isShowTop,
      backTop,
      banners,
    };
  },
};
</script>

<style scoped>
#home {
  height: 100vh;
  position: relative;
}

.wrapper {
  position: absolute;
  top: 45px;
  bottom: 50px;
  left: 0px;
  right: 0px;
  overflow: hidden;
}
</style>





